<template>
    <div class="new-box">
        <ul class="news-title">
            <li v-for="item in newsList" :key="item.id">
                <button @click="goDetail(item)">{{ item.title }}</button>
                <!-- <RouterLink active-class="jihuo" :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink> -->
                <!-- <RouterLink active-class="jihuo" :to="{name:'xiangqing', query:{id:item.id,title:item.title,content:item.content}}">{{ item.title }}</RouterLink> -->
                 
                <!-- <RouterLink active-class="jihuo" :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink> -->
                <RouterLink active-class="jihuo" :to="{name:'xiangqing', params:{id:item.id, title:item.title, content:item.content}}">{{ item.title }}</RouterLink>

                <!-- <RouterLink active-class="jihuo" :to="{name:'xiangqing', query:{id:item.id, title:item.title, content:item.content}}">{{ item.title }}</RouterLink> -->
            </li>
        </ul>
        <div class="new-content">
            <RouterView></RouterView>
        </div>
    </div>

</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue'
import { RouterView,RouterLink,useRouter } from 'vue-router'
const newsList = reactive([
    { id: '001', title: "抗癌食物", content: '蔬菜：特别是深绿色叶菜（如菠菜、羽衣甘蓝）、十字花科蔬菜（如西兰花、花椰菜、白菜）含有丰富的维生素、矿物质和抗氧化剂;水果：尤其是富含维生素C和纤维的柑橘类水果、浆果（如草莓、蓝莓），以及番茄等红色水果含有番茄红素，这是一种强大的抗氧化剂;全谷物：如燕麦、糙米、全麦面包等富含膳食纤维，有助于维持消化系统健康，减少结肠癌的风险' },
    { id: '002', title: '最高的山', content: '世界上最高的山是珠穆朗玛峰（Mount Everest），位于尼泊尔和中国边境的喜马拉雅山脉，其海拔高度为8848米（29029英尺）。该山峰不仅以它的高度著名，同时也是登山爱好者和专业登山者心目中的一个重要的挑战目标。需要注意的是，山的高度可能会因为地质活动等因素产生细微的变化，但珠穆朗玛峰作为世界最高峰的地位至今未变' },
    { id: '003', title: '最深的河', content: '世界上最深的河流是刚果河（Congo River），也称为扎伊尔河，位于非洲中部。刚果河的部分河段深度超过了220米（720英尺），使其成为世界上水深最深的河流。刚果河不仅以其深度著称，还因为它巨大的水流体积和强大的水力资源而闻名。该河流经非洲大陆的多个重要生态系统，并对周边地区的生物多样性和人类社会都有着极其重要的影响。' },
    { id: '004', title: '最长的路', content: '世界上最长的公路：泛美公路 长度：约 48,000公里（30,000英里）' }
])

const router = useRouter()
interface NewsInter{
    id: string,
    title: string,
    content: string
}
function goDetail(item: NewsInter){
    router.push({name:'xiangqing', params:{id:item.id, title:item.title, content:item.content}})
}
</script>


<style scoped>
.new-box {
    display: flex;
}
.news-title li{
    color: rgb(3, 190, 247);
    width: 100px;
}
.new-content{
    padding: 10px;
}
.jihuo{
    color: red;
    font-weight: bold;
}
</style>